<template>
	<div class="index">
    <div class="flex" style="font-size: 12px; padding: 0.2rem 0 0;">
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 0 ?'li act':'li' " @click="search(0)">全部</span>
      </div>
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 1 ?'li act':'li' " @click="search(1)">待结算</span>
      </div>
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 2 ?'li act':'li' " @click="search(2)">已结算</span>
      </div>
      <div style="flex: 1;" class="flexcc">
        <span :class="all.settlement_status == 3 ?'li act':'li' " @click="search(3)">终止结算</span>
      </div>
    </div>
    <div style="padding: 0.3rem;">
      <van-list  v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="getinfo2" style="min-height: 3rem;">
        <div class="listli" v-for="item in list" :key="item">
          <div class="flexbc" style="color: rgb(0, 90, 255); padding: 0.25rem 0.3rem; background: rgb(228, 237, 255);">
            <div class="flexc">
              <div>订单号：{{item.order_no}}</div>
              <div><img src="../../../static/img/fuzhi.png" style="width: 0.26rem; margin-left: 0.2rem;" @click="copy(item.order_no)"></div>
            </div>
            <div v-if="item.settlement_status == 1">待结算</div>
            <div v-if="item.settlement_status == 2">已结算</div>
            <div v-if="item.settlement_status == 3">终止结算</div>
          </div>
          <div style="padding: 0.25rem 0.3rem; background: #fff;">
            <div class="flexbc" style="font-size: 0.28rem; margin-bottom: 0.1rem;">{{item.goods_name}}</div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">结算金额</div>
              <div style="font-size: 0.3rem; color: rgb(245, 121, 33);">￥{{item.commission}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">生产号码</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.plan_mobile_produce}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">订单状态</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.status_name}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;" v-if="item.status_name == '生产失败'">
              <div style="font-size: 0.24rem; color: #666;">订单失原因</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.reason}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.1rem;">
              <div style="font-size: 0.24rem; color: #666;">激活状态</div>
              <div style="font-size: 0.24rem; color: rgb(120, 125, 133);">{{item.active_status_name}}</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
		data() {
			return {
        all:{
          settlement_status:0,//0:全部 1:待结算 2:已结算 3:未结算 默认为全部
          page:1,
          pageSize:20
        },
        list:[],
        loading: false,
        finished: false,
			}
		},
		created() {

		},
		mounted() {
      document.title = localStorage.getItem("store_title")
      // document.title = "下单成功"

		},
		methods: {
      onClickLeft:function(){
        this.$router.back(-2)
      },
      search:function(val){
        this.all.settlement_status = val
        this.list = []
        this.all.page = 1
        this.getinfo2()
      },

      getinfo2:function(){
        axios.get('/agent/settlement/orders',{params:this.all}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.data.length > 0){
              response.data.data.data.forEach(item=>{
                this.list.push(item)
              })

              if (this.list.length >= response.data.data.total) {
                this.finished = true;
              }else{
                this.all.page++
                this.loading = false;
              }
            }else{
              this.finished = true;
            }

        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
		}
	}
</script>


<style scoped lang="less">
  .index{ height: 100vh; overflow: auto;
    .act{ border-bottom:3px rgb(85, 85, 85) solid  !important; color: rgb(85, 85, 85) !important;}
    .li{ border-bottom:3px #f6f8fb solid; padding-bottom: 0.1rem; font-size: 0.28rem; color: rgb(146, 146, 146);}
    .listli{ border-radius: 0.1rem; font-size: 0.24rem; overflow: hidden; margin-bottom: 0.2rem;}
  }
</style>
